﻿<div id="widget_${id}" data-dojo-attach-point="widgetContainer" style="width: 300px;">
    <ul class="to-clean" data-bind="foreach: currentTags">
        <li tabindex='-1' data-bind="css: { 'selected-tag': isSelected }, hasFocus: isSelected, event: { keydown: $parent.navigateThroughCurrentTagsList }, attr: { title: getBreadcrumbs()}" class="current-tag to-clean">
            <span class="to-clean tag-name" data-bind="text: name"></span>
            <span class="to-clean tag-remove-icon" data-bind="event: { click: $parent.onCurrentTagRemoveClick }"></span>
        </li>
    </ul>
    
    <div class="search-box-container">
        <div class="dijitInline  dijitTextBox epi-searchInput search-box">
            <div class="dijitReset  dijitInputField dijitInputContainer">
                <input class="to-clean dijitReset dijitInputInner" type="text" data-dojo-attach-point="searchbox" data-bind="value: nameSearch, valueUpdate: 'afterkeydown', event: { keydown: onSearchboxKey }, hasFocus: isSearchboxSelected" />
            </div>
        </div>
    </div>
<!--    <ul data-bind="foreach: filteredTags" class="all-tags-list">
        <li data-bind="text: name, css: { 'selected-tag': isSelected() && $parent.isSearchboxSelected() }, event: { click: $parent.onFilteredTagClick }" class="filtered-tag"></li>
    </ul>&& $parent.isSearchboxSelected()-->
    

    
    <div class="tree-container">
        <ul class="tree to-clean" data-bind="template: { name: 'formElementNodeTemplate', foreach: allMainTags }"></ul>
    </div>
</div>

